import { Component } from "react";
import Alert from "./components/Alert";

class Chapter12 extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        load: true,
    };
    toggle = () => {
        this.setState({
            load: !this.state.load,
        });
    };
    render() {
        const { title } = this.props;
        const { load } = this.state;
        return (
            <div className="wrapper wrapper12">
                <div className="page-header">
                    <h3>{title}</h3>
                </div>
                <div className="page-content">
                    {load && <Alert />}
                    {!load && (
                        <button
                            className="btn btn-default"
                            onClick={this.toggle}
                        >
                            渲染组件
                        </button>
                    )}
                    {load && (
                        <button
                            className="btn btn-danger"
                            onClick={this.toggle}
                        >
                            销毁组件
                        </button>
                    )}
                </div>
            </div>
        );
    }
}

export default Chapter12;
